<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="搜索歌曲"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-search
      v-model="search"
      placeholder="请输入搜索关键词"
      input-align="center"
      @search="onSearch"
      @keyup.enter="getSearchSong"
    />
    <div class="list">
      <!-- v-for一般遍历数组 -->
      <!-- v-show遍历object -->
      <div
        v-for="(item, index) in songList"
        :key="index"
        :title="item"
        class="song"
        @click="selectItem(item)"
      >
        <a @click="playMusic(item.id)">
          <h3>{{ item.name }}</h3>

          <div class="singers">
            <span v-for="(artists, index) in item.artists" :key="artists.id">
              {{ artists.name }}
              <span v-show="index != item.artists.length - 1"></span>
            </span>
            <span v-show="item.album">
              <span>.</span>
              <span>{{ item.album.name }}</span>
            </span>
          </div>
        </a>
      </div>
      <!-- </van-list> -->
    </div>
  </div>
</template>

<script>
// import { Toast } from "vant";
export default {
  data() {
    return {
      search: "",
      songList: [],
      MusicUrl: "",
    };
  },
  created() {
    this.onSearch();
  },
  methods: {
    onSearch() {
      this.$request("get", "/search?keywords=" + this.search).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.songList = res.result.songs;
          //   this.songnum = res.result.songCount;
          // console.log(this.songList);
        }
      });
    },

    // 传入id
    selectItem(item) {
      const id = item.id;
      // console.log(item.id);
      this.$router.push({
        path: `/playsong/${id}`,
      });
    },
    onClickLeft() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    },
  },
};
</script>
<style scoped>
.audio_con {
  height: 50px;
  background-color: #f1f3f4;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.myaudio {
  width: 800px;
  height: 40px;
  margin-top: 5px;
  outline: none;
  background-color: #f1f3f4;
}
.song {
  margin-bottom: 1rem;
}
.song > a > h3 {
  text-align: left;
  font-size: 1rem;
  padding: 0 2rem;
  margin: 0;
}
.singers {
  text-align: left;
  padding: 0 2rem;
}
.singers > span {
  font-size: 0.8rem;
  color: gray;
}
.singers > span:nth-last-child(1) > span:nth-child(1) {
  margin: 0 0.3rem;
  font-weight: 900;
  color: red;
}
</style>